<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页 - 直播间 - 猫耳FM</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/live.css"/>
		<script src="js/jquery-3.6.0.js"></script>
		<style type="text/css">
			#returnback{
				position: fixed;
				top: -100%;
				right: 30px;
				width: 70px;
				height: calc(100% - 77px);
				transition: top .5s;
				cursor: pointer;
			}
			#line{
				width: 100%;
				height: calc(100% - 98px);
				background-image: url(img/rope.png);
				display: block;
			}
			#cat{
				width: 70px;
				position: relative;
				top: -2px;
				height: 98px;
				/* background-image: url(img/topscroll.png); */
			}
			#cat>img{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="header-content">
				<ul class="header-nav">
					<li class="homepage"><a href="FMindex.html" target="_blank">主站</a></li>
					<li><a href="live.html" style="color: #cd3333;">直播间</a></li>
					<li><a href="act.html" target="_blank">活动</a></li>
					<li><a href="app_fm.html" target="_blank">手机客户端</a></li>
				</ul>
				<input type="text" name="" id="sea_input" placeholder="搜素" />
				<ul class="header-opts">
					<li><a href="">注册/登录</a></li>
					<li class="upload"><a href="">我要直播</a></li>
					<div class="live_box">
						<h4>直播中心</h4>
						<div class="live_items"><a href="">我要直播</a></div>
						
						<h4>玩转直播</h4>
						<div class="live_items">
							<a href="">直播助手下载</a>
							<a href="">直播教程</a>
							<a href="">直播公告</a>
						</div>
					</div>
				</ul>
				
			</div>
		</div>
		
		<div class="container">
			<div class="home-banner-container">
				<div class="home-carousel">
					<ul class="lbt"></ul>
					<div class="lbt_des">
						
					<!-- 	<span class="banner-title">咸菜鱼青衫_</span> -->
						<ul class="control-dots">
							<li class="dot active"></li>
							<li class="dot"></li>
							<li class="dot"></li>
							<li class="dot"></li>
							<li class="dot"></li>
							<li class="dot"></li>
						</ul>
					</div>
				</div>
				<div class="home-sidebar">
					<a href=""></a>
					<a href=""></a>
					<a href=""></a>
				</div>
			</div>
			
			<!-- 推荐直播 -->
			<div class="home-recommend-live">
				<h2>推荐直播</h2>
				<div id="banner">
					<div class="live-wrap">
						
						<div class="live_card_wrap1 live_card_wrap" id="one">
							<!-- <div class="live-card"><a href=""><img src="img/tj1.jpg" ></a></div> -->
						</div>
						<div class="live_card_wrap2 live_card_wrap" id="two"></div>
					</div>
				</div>
				
				
				<div class="control-board">
					<div class="prev"></div>
					<div class="next"></div>
				</div>
			</div>
			
			<!-- 在线直播 -->
			<div class="online_wrap">
				<div class="online_title">
					<h2>在线直播</h2>
					<ul>
						<li class="hot"><i></i>热门</li>
						<li><span></span>配音</li>
						<li><span></span>音乐</li>
						<li><span></span>情感</li>
						<li><span></span>古风</li>
						<li><span></span>放松</li>
						<li><span></span>新星</li>
					</ul>
				</div>
				
				<div class="home-online-live">
					
					<!-- <div class="live-card"></div> -->
				</div>
				<div class="act_w" style="width: 100%;height: 80px; position:fixed;bottom:0px;display: none;">
					<img src="img/act_more.gif" width="70px" height="70px" style="margin-left: 35%;">
				</div>
			</div>
			
		</div>
		
		<div id="returnback">
			<div id="line"></div>
			<div id="cat"><img src="img/topscroll.png" ></div>
		</div>
		
		<script type="text/javascript">
		
			
			$(window).scroll(function () {
			   var scrollTop = $(this).scrollTop();
			   var scrollHeight = $(document).height();
			   var windowHeight = $(this).height();
			    if (scrollTop >= 200) {
					$("#returnback").css("top","0px")
					
			    }else{
					$("#returnback").css("top","-100%")
				}
			})
			$("#returnback").click(function(){
				 $('html , body').animate({scrollTop: 0},'slow');
			})
		</script>
		
		<script type="text/javascript" src="js/index.js"></script>
		<script src="js/live.js"></script>
	</body>
</html>
